<template>
  <div v-if="question1.visible">
    <h3>{{ question1.text }}</h3>
    <!-- 前置说明 -->
    <p v-if="question1.descriptions?.pre" class="pre-description">{{ question1.descriptions.pre }}</p>

    <!-- 主说明 -->
    <h3 v-if="question1.descriptions?.main">{{ question1.descriptions.main }}</h3>

    <!-- 后置说明 -->
    <p v-if="question1.descriptions?.post" class="post-description">{{ question1.descriptions.post }}</p>
  </div>
</template>

<script setup>
import { defineProps} from 'vue';
import {useQuestions} from "@/utils/paper.js";
const { getQuestionById,getAnswerById} = useQuestions()
// 使用 defineProps 接收父组件传递的属性
const props = defineProps({
  questionId:{
    type:String
  }
});

const questionId=props.questionId;
const question1=getQuestionById(questionId);
</script>

<style scoped>
.pre-description {
  margin-bottom: 8px;
  font-style: italic;
  color: #6b7280; /* 灰色 */
}

.post-description {
  margin-top: 8px;
  font-style: italic;
  color: #6b7280; /* 灰色 */
}
</style>
